<template>
  <Crumbs
    :crumbName="[
      {
        route: '',
        name: '分类管理',
      },
    ]"
  />
  <a-card style="min-height: 90%">
    <div class="table border">
      <a-page-header title="数据列表">
        <template #extra>
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled type="primary">添加分类</a-button>
          </a-popover>
          <a-button
            v-else
            class="pass-btn"
            type="primary"
            @click="handleShowAddModal"
            >添加分类</a-button
          >
          <a-modal
            v-model:visible="addVisible"
            title="添加分类"
            ok-text="确认"
            cancel-text="取消"
            :afterClose="addCloselModal"
            @ok="handleAddOk"
          >
            <a-form :model="addModel" :rules="addFormRules" ref="addFormRef">
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="类别："
                name="pet_type"
              >
                <a-input
                  v-model:value="addModel.pet_type"
                  placeholder="请填写宠物类别"
                />
              </a-form-item>
            </a-form>
          </a-modal>
        </template>
      </a-page-header>
      <a-table
        bordered
        :pagination="false"
        :columns="columns"
        :data-source="data"
        rowKey="id"
      >
        <template #operation="{ record }">
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled size="small" type="primary">删除</a-button>
          </a-popover>
          <a-popconfirm
            v-else
            title="此操作将永久删除该用户, 是否继续?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delCate(record.id)"
            @cancel="cancelDel"
          >
            <a-button size="small" type="primary" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
// 导入组件
import Crumbs from "@/components/Crumbs";
// 导入分类列表
import { useCateDataList } from "./useCateDataList";
// 导入添加分类方法
import { useAddCate } from "./useAddCate";
// 导入删除分类方法
import { useDelCate } from "./useDelCate";

export default {
  name: "",
  components: {
    Crumbs,
  },
  setup() {
    // 表格列
    const { columns, data, getCateData } = useCateDataList();

    // 添加宠物分类
    const {
      addVisible,
      handleShowAddModal,
      addModel,
      addFormRef,
      addCloselModal,
      addFormRules,
      handleAddOk,
    } = useAddCate(getCateData);

    // 删除宠物分类
    const { cancelDel, delCate } = useDelCate(getCateData);

    return {
      columns, // 列配置
      data, // 数据
      addVisible, // 添加分类框显示状态
      handleShowAddModal, // 点击添加分类显示添加用户框
      addModel, // 添加表单内容
      addFormRef, // 表单ref
      addCloselModal, // 关闭模态框
      addFormRules, // 表单校验规则
      handleAddOk, // 点击确认
      cancelDel, // 取消气泡框
      delCate, // 删除分类方法
    };
  },
};
</script>
<style scoped lang="less">
.table {
  .ant-table-wrapper {
    padding: 16px;
  }
}
.border {
  border: 1px solid #ddd;
}
.ant-page-header {
  border-bottom: none !important;
}
</style>
